<template>
    <vxe-table-column :field="column.prop" :title="column.label" :key="column.prop"
                      :type="column.type" :align="column.align" :header-align="column.headerAlign"
                      :footer-align="column.footerAlign"
                      :width="column.width" :resizable="column.resizable" :class-name="column.className"
                      :show-overflow="column.tooltip" :visible="column.visible"
                      :min-width="column.minWidth || 80"
                      :fixed="column.fixed" :filters="column.filters" :filter-method="column.filterMethod"
                      :header-class-name="column.labelClassName"
                      :edit-render="edit ? column.editRender : {}"
                      :cell-render="edit ? column.cellRender : {}"
                      :content-render="edit ? column.contentRender : {}"
                      :sortable="column.sortable"
                      :params="column" class="col" :ref="column.ref" :selectable="column.selectable">
        <template #header v-if="column.renderHeader">
            <expand-dom :column="column" :row="scope.row" :render="column.renderHeader" />
        </template>
    </vxe-table-column>
</template>

<script>
import BaseVxeTableColumnItem from "./BaseVxeTableColumnItem";

export default {
    name: "BaseVxeTableColumn",
    components: {
        BaseVxeTableColumnItem,
        expandDom: {
            functional: true,
            props: {
                row: Object,
                render: Function,
                index: Number,
                column: {
                    type: Object,
                    default: null,
                },
            },
            render: (h, ctx) => {
                const params = {
                    row: ctx.props.row,
                    index: ctx.props.index,
                };
                if (ctx.props.column) {
                    params.column = ctx.props.column;
                }
                return ctx.props.render(h, params);
            },
        },
    },
    props: {
        col: {
            type: Object,
            default() {
                return {};
            },
        },
        index: {
            type: Number,
            default() {
                return -1;
            },
        },
        edit: {
            type: Boolean,
            default() {
                return true;
            },
        },
    },
    data() {
        return {
            column: {},
            typeLst: [ 'checkbox', 'radio', ]
        };
    },
    watch: {
        col: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            this.column = $.extend({}, this.col);
            if (typeof this.column.label === "number") {
                this.column = $.extend({}, this.column, {
                    label: String(this.column.label),
                    tooltip: this.edit ? false : this.column.tooltip,
                });
            }
        },
    },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
/deep/ .col {
    .col--checkbox,
    .col--seq {
        .vxe-cell {
            min-width: auto;
        }
    }
}

.baseTable {
    .vxe-table {
        .vxe-cell {
            min-width: 50px;
            padding-left: 0px;
            padding-right: 0px;
        }

        .col--checkbox,
        .col--seq {
            .vxe-cell {
                min-width: auto;
            }
        }
    }
}
</style>
